<template>
  <!--自定义查询区域-->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="240px">
          <a-form-item label="名称搜索" :label-col="{ style: { width: '70px' } }">
            <a-input id="pathName" v-model:value="queryParam.name" />
          </a-form-item>
        </a-col>
        <a-col flex="240px">
          <a-form-item label="手机号" :label-col="{ style: { width: '70px' } }">
            <a-input id="pathName" v-model:value="queryParam.tel" />
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
          </span>
        </a-col>

      </a-row>
    </a-form>
  </div>
  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :onRowClick="handleClick" :onRowDbClick="handleDblclick" :rowClassName="rowClassName">
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>
  <!-- table区域-end-->

  <MemberModal @register="registerMemberModal" @success="reload"></MemberModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive, toRaw } from "vue";
import { BasicTable, TableAction, ActionItem, BasicColumn, FormSchema } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { render } from "/@/utils/common/renderUtils";
import { treeGrid, del } from "/@/views/weixin/member/member.api";

import MemberModal from './MemberModal.vue';
import { filterObj } from "/@/utils/common/compUtils";

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive<any>({
  name: "",
  tel: "",
});

const resetParam = { ...queryParam }

// 订单列表 - 表头
const columns: BasicColumn[] = [
  { dataIndex: "area_name", title: "所在地/单位名称/姓名", width: 160, align: "left" },
  { dataIndex: "nickname", title: "微信昵称", width: 100, align: "left" },
  { dataIndex: "tel", title: "电话", width: 60, align: "center" },
  { dataIndex: "createDate", title: "注册时间", width: 60, align: "center" },
  { dataIndex: "approvaler", title: "审核人", width: 60, align: "center" },
  { dataIndex: "approvalDate", title: "审核时间", width: 60, align: "center" },
  { dataIndex: "lx", title: "类型", width: 40, align: "center" },
  { dataIndex: "zt", title: "状态", width: 60, align: "center" }
]

// 列表页面公共参数、方法
const loading = ref<boolean>(false);
const dataSource = ref<any[]>([]);
const summaryData = ref<any[]>([]);
const {prefixCls, tableContext} = useListPage({
  tableProps: {
    rowKey: "id",
    dataSource: dataSource,
    columns: columns,
    size: 'small',
    pagination: false,
    isTreeTable: true,
    striped: true,
    useSearchForm: false,
    bordered: true,
    showTableSetting: false,
    showActionColumn: false,
    resizeHeightOffset: 40,
    showSummary: true,
    summaryData: summaryData,
    onExpand: onExpand,
    actionColumn: {
      width: 90
    }
  },
})

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    // {
    //   label: '审核',
    //   icon: "ant-design:form-outlined",
    //   onClick: auditoperation.bind(null, record),
    // },
    // {
    //   label: '编辑',
    //   icon: "ant-design:form-outlined",
    //   onClick: editoperation.bind(null, record),
    // },
    // {
    //   label: '通知',
    //   icon: "ant-design:form-outlined",
    //   onClick: setAreaManagers.bind(null, record),
    // },
    {
      label: '删除',
      color: 'error',
      icon: 'ant-design:rest-twotone',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}

//注册table数据
const [registerTable, {reload, expandAll, collapseAll}] = tableContext

//新增订单
const [registerMemberModal, {openModal: openModal}] = useModal();

//单击行
let selectRows = reactive<any>({id: '', username: ''});
function handleClick(record) {
  selectRows.id = record.id
  selectRows.username = record.username
}

//双击行
function handleDblclick(record) {
  //alert("handleDblclick" + record.id);
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

function handleCreate() {
  openModal(true, { isUpdate: false });
}

function handleEdit() {
  let record = {id: selectRows.id}
  openModal(true, { isUpdate: true, record });
}

/**
 * 删除事件
 */
async function handleDelete() {
  let record = {id: selectRows.id}
  await del(record, reload);
}

async function loadData(params) {
  loading.value = true;
  let result = treeGrid(params);
  loading.value = false;
  return result;
}

/** 点击展开图标时触发 */
async function onExpand(isExpand, rowData) {
  if (isExpand && rowData.hasChildren === "true" && rowData.children.length === 0) {
    let params = {...queryParam, parent_id: rowData.id, type: rowData.type }
    const res = await loadData(filterObj(params));
    rowData.children = res.rows;
  }
}

async function loadRootData() {
  const res = await loadData(filterObj(queryParam));
  if (res) {
    dataSource.value = res.rows;
    summaryData.value = res.footer;
    console.info(dataSource.value)
  } else {
    dataSource.value = [];
    summaryData.value = [];
  }
}

//
function searchQuery() {
  //reload();
  loadRootData();
}

function searchReset() {
  Object.assign(queryParam, resetParam);
  loadRootData();
}

//默认执行查询
searchQuery();

</script>
<style scoped>

</style>
